<template>
	<div class="rankingLeft" @click="setRankingId">
		<div class="minelst">
			<h2>云音乐特色榜</h2>
			<ul>
				<li :class="sid === 3 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/3.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">飙升榜</a></p>
						<p>更新83首</p>
					</div>
					<span data-id="3"></span>
				</li>
				<li :class="sid === 0 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/0.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">新歌榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="0"></span>
				</li>
				<li :class="sid === 2 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/2.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">原创榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="2"></span>
				</li>
				<li :class="sid === 1 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/1.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">热歌榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="1"></span>
				</li>
			</ul>
			<h2 class="scd">全球媒体榜</h2>
			<ul>
				<li :class="sid === 4 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/4.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">云音乐电音榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="4"></span>
				</li>
				<li :class="sid === 5 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/5.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">UK排行榜周榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="5"></span>
				</li>
				<li :class="sid === 6 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/6.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">美国Billboard周榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="6"></span>
				</li>
				<li :class="sid === 7 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/7.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">KTV嗨榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="7"></span>
				</li>
				<li :class="sid === 10 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/10.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">日本Oricon周榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="10"></span>
				</li>
				<li :class="sid === 19 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/19.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name">
							<a href="javascript:;">法国 NRJ EuroHot 30周榜</a>
						</p>
						<p>每天更新</p>
					</div>
					<span data-id="19"></span>
				</li>
				<li :class="sid === 22 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/22.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">云音乐ACG音乐榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="22"></span>
				</li>
				<li :class="sid === 23 ? 'mine selected' : 'mine'">
					<div class="img">
						<a href="javascript:;"><img src="@/image/idx/23.jpg" alt="" /></a>
					</div>
					<div class="info">
						<p class="name"><a href="javascript:;">云音乐说唱榜</a></p>
						<p>每天更新</p>
					</div>
					<span data-id="23"></span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: "RankingLeft",
	components: {},
};
</script>

<script setup>
import { defineProps, defineEmits, watch, ref } from "vue";

const sid = ref(3);

const props = defineProps({
	id: {
		type: Number,
		required: true,
	},
});

const emit = defineEmits(["setsongid"]);

watch(props, (newValue, oldValue) => {
	sid.value = +newValue.id;
});

const setRankingId = (e) => {
	if (e.target.className === "scd" || e.target.nodeName === "H2") return;
	emit("setsongid", e.target.dataset.id);
	document.documentElement.scrollTop = 0;
};
</script>

<style lang="less" scoped>
.rankingLeft {
	position: static;
	float: left;
	width: 240px;
	height: 100%;
	box-sizing: border-box;
	.minelst {
		margin-top: 40px;
		.mine {
			position: relative;
			& > span {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
		& > h2 {
			padding: 0 10px 12px 15px;
			font-size: 14px;
			color: #000;
		}
		& > ul {
			cursor: pointer;
			vertical-align: middle;
			li {
				position: relative;
				display: flex;
				zoom: 1;
				height: 42px;
				padding: 10px 0 10px 20px;
				.img {
					width: 40px;
					height: 40px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					padding-left: 10px;
					font-size: 12px;
					color: #999;
					.name {
						margin-top: 2px;
						margin-bottom: 8px;
						a {
							color: #000;
						}
					}
				}
			}
			li:hover {
				background-color: #e7e7e7;
			}
			.selected {
				background: #e6e6e6 !important;
			}
		}
		.scd {
			margin-top: 20px;
		}
	}
}
</style>
